import { getCSSColor, getCSSColorV2 } from '@/utils/color-helper';
import { seriesLabel, seriesLabelBar, seriesBar, seriesBarTopRect } from './BarChart/options';

const labelColor = getCSSColorV2('text-4');

const grid = {
  left: '7%',
  right: '2%',
  top: '15%',
  bottom: '12%'
};
const legend = {
  icon: 'circle',
  textStyle: {
    color: labelColor
  }
};

const dataZoom = [
  {
    type: 'slider',
    throttle: 20,
    start: 90,
    end: 100,
    minValueSpan: 10,
    maxValueSpan: 10,
    show: false
  },
  {
    type: 'inside'
  }
];

const seriesLine = {
  type: 'line',
  data: [],
  itemStyle: {
    color: getCSSColorV2('danger-6')
  }
};

const nameTextStyle = {
  fontSize: 12,
  color: labelColor
};

const leftNameTextStyle = {
  padding: [4, 30, 0, 0],
  ...nameTextStyle
};

const rightNameTextStyle = {
  padding: [4, 0, 0, 30],
  ...nameTextStyle
};

const tooltip: echarts.EChartOption.Tooltip = {
  // backgroundColor: getCSSColorV2('danger-6'),
  borderWidth: 0,
  ...{ className: 'echarts-tooltip' },
  // textStyle: {
  //   color: getCSSColorV2('text-5')
  // },
  transitionDuration: 0,
  axisPointer: {
    type: 'cross',
    // shadowStyle: {
    //   color: getCSSColor('white-004')
    // },
    label: {
      show: true,
      color: getCSSColorV2('brand-5'),
      backgroundColor: 'transparent'
    }
  }
};

const xAxis: echarts.EChartOption.XAxis = {
  data: [],
  axisPointer: {
    type: 'shadow'
  },
  axisTick: {
    show: false
  },
  axisLine: {
    lineStyle: {
      width: 1,
      color: getCSSColorV2('line-4')
    }
  },
  axisLabel: {
    color: labelColor,
    fontSize: 12
  }
};

const splitLineX: echarts.EChartOption.BasicComponents.CartesianAxis.SplitLine = {
  lineStyle: {
    type: 'dashed',
    width: 1,
    color: getCSSColorV2('line-2')
  }
};

const yAxisItem: echarts.EChartOption.YAxis = {
  type: 'value',
  axisLabel: {
    formatter: '{value}',
    color: labelColor,
    fontSize: 12
  },
  splitLine: splitLineX,
  nameLocation: 'end',
  nameTextStyle: leftNameTextStyle
};

export {
  labelColor,
  grid,
  legend,
  seriesLine,
  seriesLabel,
  seriesLabelBar,
  seriesBar,
  seriesBarTopRect,
  tooltip,
  xAxis,
  yAxisItem,
  leftNameTextStyle,
  rightNameTextStyle,
  splitLineX,
  dataZoom
};
